import React, { useState } from 'react'
import { DatePicker, Space } from 'antd'
import dayjs from 'dayjs'

const { RangePicker } = DatePicker

function MyDatePicker({
  selectedDateString,
  setSelectedDateString,
  initialDate
}) {
  // 保存选择的日期时间
  const [selectedDate, setSelectedDate] = useState(
    initialDate || [dayjs(), dayjs()]
  )

  const rangePresets = [
    {
      label: '最近一周',
      value: [dayjs().add(-7, 'day'), dayjs()]
    },
    {
      label: '最近一个月',
      value: [dayjs().add(-1, 'month'), dayjs()]
    },
    {
      label: '最近三个月',
      value: [dayjs().add(-3, 'month'), dayjs()]
    }
  ]

  const onRangeChange = (dates, dateStrings) => {
    setSelectedDate(dates)
    setSelectedDateString(dateStrings)
  }

  return (
    <Space direction="vertical">
      <RangePicker
        value={selectedDate}
        showTime // 允许选择时间
        format="YYYY-MM-DD HH:mm:ss" // 设置日期和时间的格式
        presets={rangePresets}
        onChange={onRangeChange}
      />
    </Space>
  )
}

export default MyDatePicker
